<template>
  <div id="BackgroundHomePage">
<!--    左-->
    <div id="backHomeLeft">
<!--      统计访问-->
      <div id="statistical">
        <p>统计访问</p>
        <div id="statisticalVessels">
          <div class="statisticalFour statistical_one">
            <p class="titles">日访问量</p>
            <div>{{ msg.dayMsg.today }}</div>
            <p class="compare">
              较昨日
              <span :class="[msg.dayMsg.diff>=0?'green':'red']">
                {{ msg.dayMsg.diff>=0?"+"+msg.dayMsg.diff:msg.dayMsg.diff }}<i class="iconfont" :class="[msg.dayMsg.diff>=0?'icon-xiangshang':'icon-paixu']"></i>
              </span>
            </p>
          </div>
          <div class="statisticalFour statistical_two">
            <p class="titles">周访问量</p>
            <div>{{ msg.weeksMsg.week }}</div>
            <p class="compare">
              较上周
              <span :class="[msg.weeksMsg.diff>=0?'green':'red']">
                {{ msg.weeksMsg.diff>=0?"+"+msg.weeksMsg.diff:msg.weeksMsg.diff }}<i class="iconfont" :class="[msg.weeksMsg.diff>=0?'icon-xiangshang':'icon-paixu']"></i>
              </span>
            </p>
          </div>
          <div class="statisticalFour statistical_three">
            <p class="titles">月访问量</p>
            <div>{{ msg.monthMsg.month }}</div>
            <p class="compare">
              较上月
              <span :class="[msg.monthMsg.diff>=0?'green':'red']">
                {{ msg.monthMsg.diff>=0?"+"+msg.monthMsg.diff:msg.monthMsg.diff }}<i class="iconfont" :class="[msg.monthMsg.diff>=0?'icon-xiangshang':'icon-paixu']"></i>
              </span>
            </p>
          </div>
          <div class="statisticalFour statistical_four">
            <p class="titles">年访问量</p>
            <div>{{ msg.yearMsg.year }}</div>
            <p class="compare">
              较去年
              <span :class="[msg.yearMsg.diff>=0?'green':'red']">
                {{ msg.yearMsg.diff>=0?"+"+msg.yearMsg.diff:msg.yearMsg.diff }}<i class="iconfont" :class="[msg.yearMsg.diff>=0?'icon-xiangshang':'icon-paixu']"></i>
              </span>
            </p>
          </div>
        </div>
      </div>
<!--      访问流量趋势-->
      <div id="traffic">
        <p>访问流量趋势</p>
        <div id="trafficVessels"></div>
      </div>
    </div>
<!--    右-->
    <div id="backHomeRight">
      <p>用户概况</p>
        <div id="pieChartVessels">
          <div id="age">
            <p>年龄占比</p>
            <div id="AgePieChart"></div>
          </div>
          <div id="sex">
            <p>性别占比</p>
            <div id="sexPieChart"></div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>

// import { mapGetters } from 'vuex'
export default {
  name: 'BackgroundHomePage',
  data () {
    return {
      msg: {
        dayMsg: {
          // day: 150,
          // compare: +2
        },
        weeksMsg: {
          // weeks: 1270,
          // compare: -5
        },
        monthMsg: {
          // month: 5688,
          // compare: +2
        },
        yearMsg: {
          // year: 129380,
          // compare: +2
        }
      },
      initeChartsArr: [
        5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 50, 50, 55, 60, 55, 50, 50, 20, 10, 10, 10, 10, 20, 100
      ],
      agePieChartArr: [
        10, 25, 39.8, 25.2
      ]
    }
  },
  mounted () {
    // mapGetters('userInfo')
    // console.log(userInfo)
    this.initeCharts()
    this.agePieChart()
    this.sexPieChart()
    this.day()
    this.week()
    this.month()
    this.year()
    console.log(this.$store.state)
  },
  methods: {
    // 访问量折线图
    initeCharts () {
      this.hourTrend().then(data => {
        const { object } = data.data
        const arr = new Array(24).fill(0)
        const key = Object.keys(object)
        const value = Object.values(object)
        for (var i = 0; i < key.length; i++) {
          arr[parseInt(key[i])] = value[i]
        }
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(document.getElementById('trafficVessels'))
        myChart.setOption({
          color: '#ff9512',
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24/H']
          },
          tooltip: {
            trigger: 'axis'
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: arr,
              type: 'line',
              smooth: true,
              areaStyle: {}
            }
          ]
        })
      }).catch(err => {
        console.log(err.toString())
      })
    },
    // 年龄饼状图
    agePieChart () {
      this.rateAge().then(data => {
        // console.log(data)
        const msg = data.data.object
        const myChart = this.$echarts.init(document.getElementById('AgePieChart'))
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            bottom: '0',
            left: '0'
          },
          series: [
            {
              name: '年龄占比',
              type: 'pie',
              radius: '50%',
              data: [
                // { value: this.agePieChartArr[0], name: '0~14岁    ' + this.agePieChartArr[0] + '%' },
                // { value: this.agePieChartArr[0], name: '14~18岁    ' + this.agePieChartArr[0] + '%' },
                // { value: this.agePieChartArr[1], name: '18~25岁    ' + this.agePieChartArr[1] + '%' },
                // { value: this.agePieChartArr[2], name: '25~55岁    ' + this.agePieChartArr[2] + '%' },
                // { value: this.agePieChartArr[3], name: '55~80岁    ' + this.agePieChartArr[3] + '%' }
                { value: msg[0], name: '0~14岁    ' + msg[0] + '%' },
                { value: msg[1], name: '14~18岁    ' + msg[1] + '%' },
                { value: msg[2], name: '18~25岁    ' + msg[2] + '%' },
                { value: msg[3], name: '25~55岁    ' + msg[3] + '%' },
                { value: msg[4], name: '55~80岁    ' + msg[4] + '%' },
                { value: msg[5], name: '未知' + msg[5] + '%' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 性别折线图
    sexPieChart () {
      this.male().then(data => {
        const message = data.data.object
        const myChart = this.$echarts.init(document.getElementById('sexPieChart'))
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '0',
            left: 'center'
          },
          series: [
            {
              name: '性别占比',
              type: 'pie',
              radius: ['55%', '70%'],
              data: [
                { value: message.male, name: '男' },
                { value: message.female, name: '女' }
              ]
            }
          ]
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 性别分布
    male () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/rateSex'
        }).then(data => {
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 年龄分布
    rateAge () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/rateAge'
        }).then(data => {
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 访问量
    hourTrend () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/hourTrend'
        }).then(data => {
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 日访问量
    day () {
      this.$axios({
        url: '/Menu/Admin/fromYesterday'
      }).then(data => {
        console.log(data)
        this.msg.dayMsg = data.data.object
      }).catch(err => {
        console.log(err)
      })
    },
    // 周访问量
    week () {
      this.$axios({
        url: '/Menu/Admin/fromWeek'
      }).then(data => {
        console.log(data)
        this.msg.weeksMsg = data.data.object
      }).catch(err => {
        console.log(err)
      })
    },
    // 月访问量
    month () {
      this.$axios({
        url: '/Menu/Admin/fromMonth'
      }).then(data => {
        console.log(data)
        this.msg.monthMsg = data.data.object
      }).catch(err => {
        console.log(err)
      })
    },
    // 年访问量
    year () {
      this.$axios({
        url: '/Menu/Admin/fromYear'
      }).then(data => {
        console.log(data)
        this.msg.yearMsg = data.data.object
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .red {
    color: red !important;
  }
  .green{
    color: rgb(41, 255, 127) !important;
  }
  #BackgroundHomePage{
    width: 100%;
    min-width: 1150px;
    display: flex;
    position: relative;
    padding-right: 350px;
    padding-left: 15px;
    background-color: rgb(255, 244, 231);
    //左
    #backHomeLeft{
      width: 100%;
      min-width: 800px;
      padding-right: 30px;
      height: 1040px;
      //统计访问
      #statistical{
        width:100%;
        p{
          width: 100%;
          height: 30px;
          font-weight: 600;
        }
        #statisticalVessels{
          width: 100%;
          height: 200px;
          //background-color: red;
          display: grid;
          grid-template-rows: 100%;
          grid-template-columns: auto auto auto auto;
          gap: 20px;
          .statisticalFour{
            border-radius: 5px;
            padding: 20px;
            .titles{
              color: rgb(87, 87, 87);
            }
            div{
              width: 100%;
              height: 50px;
              font-size: 30px;
              text-align: center;
              line-height: 50px;
              color: #ffffff;
              font-weight: 600;
              margin-top: 20px;
            }
            .compare{
              text-align: center;
              color: rgb(87, 87, 87);
            }
          }
          .statistical_one{
            background-color: rgb(200, 219, 255);
          }
          .statistical_two{
            background-color: rgb(255, 200, 200);
          }
          .statistical_three{
            background-color: rgb(200, 255, 202);
          }
          .statistical_four{
            background-color: rgb(255, 200, 253);
          }
        }
      }
      #traffic{
        margin-top: 10px;
        p{
          width: 100%;
          height: 30px;
          font-weight: 600;
        }
        #trafficVessels{
          width: 100%;
          height: 740px;
          background-color: #ffffff;
          border-radius: 5px;
        }
      }
    }
    //右
    #backHomeRight{
      width: 350px;
      position: absolute;
      top: 0;
      right: 0;
      p{
        width: 100%;
        height: 30px;
        font-weight: 600;
      }
      #pieChartVessels{
        width: 100%;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 20px;
        #age{
          margin-bottom: 80px;
          p{
            color: rgb(87, 87, 87);
          }
          #AgePieChart{
            width: 100%;
            height: 400px;
          }
        }
        #sex{
          p{
            color: rgb(87, 87, 87);
          }
          #sexPieChart{
            width: 100%;
            height: 400px;
          }
        }
      }
    }
  }
</style>
